<template>
  <div>
    <el-card>
      <template #header>
        <el-row type="flex" justify="space-between">
          <el-button type="primary" size="small" @click="add">添加经纪</el-button>
          <el-input v-model="name_contains" placeholder="请输入内容" style="width:400px">

            <el-button slot="append" icon="el-icon-search" @click="search" />
          </el-input>
        </el-row>
      </template>

      <el-table
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="image"
          label="图片"
          width="180"
        >
          <template v-slot="{row}">
            <img v-imgErr="require('@/assets/common/bigUserHeader.png')" :src="row.image" alt="" style="width:120px">
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="名称"
          width="180"
        />
        <el-table-column
          prop="email"
          label="邮箱"
        />
        <el-table-column
          prop="phone"
          label="电话"
        />
        <el-table-column
          prop="address"
          label="地址"
        />
        <el-table-column
          prop="desc"
          label="介绍"
        />
        <el-table-column
          prop="address"
          label="操作"
        >
          <template v-slot="{row}">
            <el-button type="primary" size="small" @click="edit(row.id)">编辑</el-button>
            <el-button size="small" type="danger" @click="del(row.id)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>

      <el-row type="flex" justify="center">
        <el-pagination

          :total="total"
          :page-size="limit"
          @current-change="currentChange"
        />
      </el-row>

    </el-card>
    <Dialog ref="role" :dialog-visible.sync="showDialog" @updateEvent="getAgents" />
  </div>
</template>

<script>
import { getAgent, delAgent, getTotal } from '@/api/agent/index.js'
import Dialog from './components/index.vue'
export default {
  components: { Dialog },
  data() {
    return {
      name_contains: '',
      total: 0,
      limit: 2,
      start: 0,
      showDialog: false,
      tableData: [],
      FormData: {
        'name': '',
        'email': '',
        'phone': '',
        'address': '',
        'desc': '',
        'image': ''
      }
    }
  },
  created() {
    this.getAgents()
    // this.getTotals()
  },
  methods: {
    async  search() {
      const res = await getAgent({
        name_contains: this.name_contains
      })
      const rew = await getTotal({
        name_contains: this.name_contains
      })
      // console.log(107, rew)
      this.total = rew.data
      this.tableData = res.data
    },
    async  getAgents() {
      const res = await getAgent({
        _limit: this.limit,
        _start: this.start
      })
      const rew = await getAgent()
      // console.log(95, rew)
      this.total = rew.data.length
      this.tableData = res.data
    },
    // async getTotals() {
    //   const res = await getTotal()
    //   // console.log(110, res)
    //   this.total = res.data
    // },
    edit(id) {
      this.showDialog = true
      this.$refs.role.getAgentById(id)
    },
    // 删除角色
    del(id) {
      this.$confirm('是否确定删除？', '提示', {
        type: 'warning'
      }).then(async() => {
        // 调用接口
        await delAgent(id)
        /**
         * 判断到删除的是最后一条数据，我们更新列表的时候
         * 应该请求上一页的数据才对，注意：需要判断当前页面是否为第一页
         * 如果是第一页则不需要请求上一页的数据。
         * 如何判断此刻是在删除最后一条数据？
         * 答：getEmployees.length === 1说明是最后一条数据了
         * */
        if (this.tableData.length === 1 && this.start !== 1) {
          this.start -= this.limit
        }
        // 更新列表
        this.getAgents()
        this.getTotals()
      }).catch((err) => {
        // 点击了取消按钮会触发这里，或者then里面的代码报错也会触发这里
        // 并且错误信息会被参数err接收到
        console.log('点击了取消按钮：', err)
      })
    },
    add() {
      this.showDialog = true
    },
    currentChange(page) {
      this.start = (page - 1) * this.limit
      // this.pagejson._start = newPage
      this.getAgents()
    }
  }
}

</script>

<style>

</style>
